import './ReceiveList.scss'

import { useState } from 'react'
import { useMount, useRequest } from 'ahooks'

import { ProTable } from '@ant-design/pro-components'

import { Tree } from 'antd'

import { Http } from '../../../Api'

export const ReceiveList = () => {
    const [Active, setActive] = useState([])
    const [OrgList, setOrgList] = useState([])

    const [pageIndex, setPageIndex] = useState(1)
    const [pageSize, setPageSize] = useState(10)

    const onSelect = e => {
        if (e.length > 0) setActive(e)
    }
    const { runAsync: getOrg } = useRequest(Http, { manual: true, onSuccess: res => setOrgList(res) })

    const getData = async e => {
        delete e.current
        delete e.pageSize
        return getList({
            url: 'getAllMasterDataEmpList',
            data: { pageIndex, pageSize, ...e, PkOrgName: Active[0] },
        }).then(res => {
            return { data: res.list, total: res.total, success: true }
        })
    }

    const { runAsync: getList } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            console.log('用户信息', res)
        },
    })

    const columns = [
        {
            dataIndex: 'pkDeptName',
            title: '部门名称',
            valueType: 'input',
            width: 160,
        },
        {
            dataIndex: 'name',
            title: '姓名',
            valueType: 'input',
            width: 80,
        },
        {
            dataIndex: 'sexName',
            title: '性别',
            valueType: 'input',
            width: 80,
        },
        {
            dataIndex: 'mobile',
            title: '联系方式',
            valueType: 'input',
            width: 120,
        },
        {
            dataIndex: 'idCard',
            title: '身份证',
            valueType: 'input',
            width: 160,
        },
        {
            dataIndex: 'empStatusName',
            title: '人员状态',
            valueType: 'input',
            width: 160,
        },
        {
            dataIndex: 'code',
            title: '人员编号',
            valueType: 'input',
            width: 160,
        },
        {
            dataIndex: 'beginDate',
            title: '入职时间',
            valueType: 'input',
            width: 160,
            hideInSearch: true,
        },
        {
            dataIndex: 'endDate',
            title: '离职时间',
            valueType: 'input',
            width: 160,
            hideInSearch: true,
        },
        {
            dataIndex: 'createTime',
            title: '创建时间',
            valueType: 'input',
            width: 160,
            hideInSearch: true,
        },
    ]

    useMount(() => getOrg({ url: 'getAllMasterDataOrgTree' }))
    return (
        <div className="ReceiveList">
            <div className="OrgList">
                <Tree
                    defaultExpandAll
                    selectedKeys={Active}
                    onSelect={onSelect}
                    fieldNames={{ key: 'tableName', title: 'tableName' }}
                    treeData={OrgList}
                />
            </div>
            <div className="UserList">
                <ProTable
                    rowKey="uuid"
                    columns={columns}
                    request={getData}
                    pagination={{
                        pageSize: pageSize,
                        showSizeChanger: true,
                        onChange: (e, a) => {
                            setPageIndex(e)
                            setPageSize(a)
                        },
                    }}
                    scroll={{ x: 800, y: 600 }}
                />
            </div>
        </div>
    )
}
